<template>
	<view class="order-detail-container">
		<!-- 顶部状态栏 -->
		<view class="status-bar"></view>

		<!-- 订单状态 -->
		<view class="order-status">
			<view class="status-icon"></view>
			<view class="status-text">{{ orderStatusText }}</view>
			<view class="status-desc">{{ orderStatusDesc }}</view>
		</view>

		<!-- 订单编号和时间 -->
		<view class="order-info">
			<view class="info-item">
				<text class="label">订单编号：</text>
				<text class="value">{{ orderDetail.order_num }}</text>
			</view>
			<view class="info-item">
				<text class="label">下单时间：</text>
				<text class="value">{{ orderDetail.order_time }}</text>
			</view>
		</view>

		<!-- 收货信息 -->
		<view class="address-section">
			<view class="section-title">收货信息</view>
			<view class="address-info">
				<view class="contact-info">
					<text class="name">{{ orderDetail.member_address_info.receive_name }}</text>
					<text class="phone">{{ orderDetail.member_address_info.receive_phone }}</text>
				</view>
				<view class="address-text">{{ orderDetail.member_address_info.region_name }}
					{{ orderDetail.member_address_info.address }}
				</view>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="goods-section">
			<view class="section-title">商品信息</view>
			<view class="goods-list">
				<view class="goods-item" v-for="(goods, index) in orderDetail.goods_list" :key="index">
					<image class="goods-image" :src="goods.goods_img" mode="aspectFill"></image>
					<view class="goods-info">
						<view class="goods-title">{{ goods.goods_title }}</view>
						<view class="goods-desc">{{ goods.description }}</view>
						<view class="goods-spec">{{ goods.goods_attr.attrs }}</view>
						<view class="goods-price">
							<text class="price">¥{{ goods.goods_price }}</text>
							<text class="unit">/{{ goods.company }}</text>
						</view>
					</view>
					<view class="goods-count">x{{ goods.num }}</view>
				</view>
			</view>
		</view>

		<!-- 到货时间 -->
		<!-- <view class="delivery-time-section">
			<view class="section-title">到货时间</view>
			<view class="delivery-time">
				{{ formatDate(orderDetail.service_start_time) }} 至 {{ formatDate(orderDetail.service_end_time) }}
			</view>
		</view> -->

		<!-- 订单金额 -->
		<view class="amount-section">
			<view class="amount-item">
				<text class="label">商品总价：</text>
				<text class="value">¥{{ orderDetail.order_money }}</text>
			</view>
			<view class="amount-item">
				<text class="label">运费：</text>
				<text class="value">¥{{ orderDetail.postage }}</text>
			</view>
			<view class="amount-item total">
				<text class="label">实付款：</text>
				<text class="value">¥{{ orderDetail.pay_money }}</text>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons" v-if="showActionButtons">
			<button class="btn cancel" v-if="canCancel" @click="cancelOrder">取消订单</button>
			<button class="btn pay" v-if="needPay" @click="goToPay">去支付</button>
			<!-- <button class="btn confirm" v-if="canConfirm" @click="confirmReceipt">确认收货</button> -->
			<!-- <button class="btn confirm" v-if="showEval" @click="confirmEval">去评价</button> -->
		</view>
	</view>
</template>

<script>
	import api from '../../api/request';

	export default {
		data() {
			return {
				orderId: '',
				orderDetail: {},
				orderStatusText: '',
				orderStatusDesc: '',
				showActionButtons: true,
				canCancel: false,
				needPay: false,
				canConfirm: false,
				showEval: false,
			};
		},
		onLoad(options) {
			if (options.order_id) {
				this.orderId = options.order_id;
				this.getOrderDetails();
			} else {
				uni.showToast({
					title: '缺少订单ID',
					icon: 'none'
				});
			}
		},
		methods: {
			// 获取订单详情
			getOrderDetails() {
				uni.showLoading({
					title: '加载中...'
				});

				api.getOrderDetail({
					order_id: this.orderId
				}).then(res => {
					uni.hideLoading();
					if (res.code === 1 && res.data) {
						this.orderDetail = res.data;
						this.updateOrderStatusInfo();
					} else {
						uni.showToast({
							title: res.msg || '获取订单详情失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					});
					console.error('获取订单详情失败:', err);
				});
			},
			//订单状态（0：代发货；,1:待支付；2：待收货；3：已完成；4：待评价；5：退款中;6:退款完成,7:已评价,8:已取消;9:退货中，10：退款完成,11:已失效）
			// 更新订单状态信息
			updateOrderStatusInfo() {
				const status = this.orderDetail.order_status;
				switch (status) {
					case 0:
						this.orderStatusText = '待发货';
						this.orderStatusDesc = '卖家正在准备发货';
						// this.canCancel = true;
						this.showActionButtons = false;
						break;
					case 1:
						this.orderStatusText = '待付款';
						this.orderStatusDesc = '请在2小时内完成支付';
						this.canCancel = true;
						this.needPay = true;
						break;
					case 2:
						this.orderStatusText = '待收货';
						this.orderStatusDesc = '卖家已发货，请注意查收';
						this.canConfirm = true;
						break;
					case 3:
						this.orderStatusText = '已完成';
						this.orderStatusDesc = '订单已完成';
						this.showActionButtons = false;
						break;
					case 4:
						this.orderStatusText = '待评价';
						this.orderStatusDesc = '评价您的订单！';
						this.showEval = true;
						break;
					case 5:
						this.orderStatusText = '退款中';
						this.orderStatusDesc = '退款处理中，请耐心等待';
						this.showActionButtons = false;
						break;
					case 6:
						this.orderStatusText = '退款完成';
						this.orderStatusDesc = '订单退款完成';
						this.showActionButtons = false;
						break;
					case 7:
						this.orderStatusText = '已评价';
						this.orderStatusDesc = '订单已评价';
						this.showActionButtons = false;
						break;
					case 8:
						this.orderStatusText = '已取消';
						this.orderStatusDesc = '订单已取消';
						this.showActionButtons = false;
						break;
					case 9:
						this.orderStatusText = '退货中';
						this.orderStatusDesc = '订单退货中';
						this.showActionButtons = false;
						break;
					case 10:
						this.orderStatusText = '退款完成';
						this.orderStatusDesc = '订单退款完成';
						this.showActionButtons = false;
						break;
					case 11:
						this.orderStatusText = '已失效';
						this.orderStatusDesc = '订单已失效';
						this.showActionButtons = false;
						break;
					default:
						this.orderStatusText = '未知状态';
						this.orderStatusDesc = '';
						this.showActionButtons = false;
				}
			},

			// 格式化时间戳为日期
			formatDate(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp * 1000);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}`;
			},

			// 取消订单
			cancelOrder() {
				uni.showModal({
					title: '提示',
					content: '确定要取消订单吗？',
					success: (res) => {
						if (res.confirm) {
							api.cancelOrder({
								order_id: this.orderId
							}).then(result => {
								if (result.code === 1) {
									uni.showToast({
										title: '订单已取消',
										icon: 'success'
									});
									// 返回订单列表
									setTimeout(() => {
										uni.navigateBack();
									}, 1500);
								} else {
									uni.showToast({
										title: result.msg || '取消订单失败',
										icon: 'none'
									});
								}
							}).catch(err => {
								uni.showToast({
									title: '网络错误',
									icon: 'none'
								});
								console.error('取消订单失败:', err);
							});
						}
					}
				});
			},

			// 去支付
			goToPay() {
				// 跳转到支付页面
				uni.navigateTo({
					url: `/pages/order/sureOrder2?order_num=${this.orderDetail.order_num}&pay_money=${this.orderDetail.pay_money}`
				});
			},
			confirmEval() {
				uni.navigateTo({
					url: `/pages/order/evaluate?order_num=${this.orderDetail.order_num}`
				});
			},
			// 确认收货
			confirmReceipt() {
				uni.showModal({
					title: '提示',
					content: '确定已收到商品吗？',
					success: (res) => {
						if (res.confirm) {
							// 调用确认收货API
							// 这里需要根据实际API进行实现
							uni.showToast({
								title: '收货确认成功',
								icon: 'success'
							});
							// 刷新订单状态
							this.getOrderDetail();
						}
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.order-detail-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 100rpx;
	}

	.status-bar {
		height: 20rpx;
		background-color: #f5f5f5;
	}

	.order-status {
		background-color: #fff;
		padding: 40rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-bottom: 1rpx solid #eee;
	}

	.status-icon {
		width: 120rpx;
		height: 120rpx;
		background-color: #ff9500;
		border-radius: 50%;
		margin-bottom: 20rpx;
		position: relative;
		color: #fff;

		/* 方案1: 使用Unicode字符 - 已启用 */
		font-size: 80rpx;
		line-height: 120rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;

		/* 使用伪元素来显示符号 */
		&::before {
			content: '✓';
			/* 对号 */
			/* content: '✗'; 叉号 */
			/* content: 'i'; 信息图标 */
			/* content: '!'; 感叹号 */
		}

		/* 方案2: 使用图标字体 - 注释掉
				font-family: 'iconfont';
				font-size: 70rpx;
				line-height: 120rpx;
				text-align: center;
				content: '\e600'; */

		/* 方案3: 使用SVG背景 - 注释掉
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M30,50 L45,65 L75,35" stroke="white" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
				background-size: 60%;
				background-repeat: no-repeat;
				background-position: center; */

		/* 方案4: 使用CSS形状 - 注释掉
				&::after {
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					width: 60rpx;
					height: 30rpx;
					border-bottom: 6rpx solid #fff;
					border-right: 6rpx solid #fff;
					transform: translate(-50%, -50%) rotate(45deg);
				} */
	}

	.status-text {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.status-desc {
		font-size: 28rpx;
		color: #999;
	}

	.order-info {
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		padding: 15rpx 0;
	}

	.label {
		font-size: 28rpx;
		color: #999;
	}

	.value {
		font-size: 28rpx;
		color: #333;
	}

	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		padding: 20rpx 30rpx;
		background-color: #f5f5f5;
	}

	.address-section,
	.goods-section,
	.delivery-time-section,
	.amount-section {
		background-color: #fff;
		margin-top: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.address-info {
		padding: 20rpx 30rpx;
	}

	.contact-info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.name {
		font-size: 30rpx;
		color: #333;
	}

	.phone {
		font-size: 30rpx;
		color: #333;
	}

	.address-text {
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
	}

	.goods-list {
		padding: 0 30rpx;
	}

	.goods-item {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;

		&:last-child {
			border-bottom: none;
		}
	}

	.goods-image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.goods-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.goods-title {
		font-size: 30rpx;
		color: #333;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.goods-desc,
	.goods-spec {
		font-size: 26rpx;
		color: #999;
	}

	.goods-price {
		display: flex;
		align-items: center;
	}

	.price {
		font-size: 30rpx;
		color: #e64340;
		font-weight: bold;
	}

	.unit {
		font-size: 26rpx;
		color: #999;
		margin-left: 10rpx;
	}

	.goods-count {
		font-size: 28rpx;
		color: #333;
		align-self: flex-end;
	}

	.delivery-time {
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		color: #333;
	}

	.amount-section {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 30rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.amount-item {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 0;
	}

	.total {
		font-weight: bold;
	}

	.total .label {
		color: #333;
		font-size: 32rpx;
	}

	.total .value {
		color: #e64340;
		font-size: 36rpx;
	}

	.action-buttons {
		position: fixed;
		bottom: 150rpx;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		padding: 20rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.btn {
		width: 240rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 40rpx;
		font-size: 30rpx;
		margin: 0 10rpx;
	}

	.cancel {
		background-color: #f5f5f5;
		color: #333;
		border: 1rpx solid #ddd;
	}

	.pay {
		background-color: #ff9500;
		color: #fff;
		border: none;
	}

	.confirm {
		background-color: #07c160;
		color: #fff;
		border: none;
	}
</style>